<template>
  <div class='container'>
    <div class="content">
        <dl v-for="item in collectionList" :key ="item" @click="getprod(item.prodId)">
            <dt><img :src="item.pic" alt=""></dt>
            <dd>
                <p class="tit">{{item.prodName}}</p>
                <p class="price">￥ <span>{{item.price}}</span></p>
            </dd>
        </dl>
    </div>
    <view v-if="!collectionList.length" class="empty-list">
        暂无商品
    </view>
  </div>
</template>

<script>
import { mapState,mapActions } from "vuex";
export default {
    computed: {
        ...mapState({
            collectionList: (state) => state.user.collectionList,
            current: (state) => state.user.current,
            size: (state) => state.user.size,
        }),
    },
    methods: {
        ...mapActions({
            getCollection:'user/getCollection',
        }),
        getprod(prodId){
            console.log(prodId);
            wx.navigateTo({
                url: `/pages/category/prod/detail?prodId=${prodId}`
            })
        }
    },
    onLoad(){
        this.getCollection(this.current,this.size)
    }
}
</script>

<style scoped>
page {
    background-color: #f4f4f4;
    color: #333;
}
.content{
    width: 100%;
}
.content dl{
    float: left;
    padding: 20rpx 10rpx 10rpx 20rpx;
    width: 375rpx;
    float: left;
    background: #fff;
    padding-bottom: 20rpx;
    box-sizing: border-box;
}
.content dl dt{
    border-radius: 8rpx;
    text-align: center;
    font-size: 0;
}
.content dl dt img{
    width: 345rpx;
    height: 345rpx;
    display: inline-block;
    overflow: hidden;
}
dl dd{
    margin-top: 20rpx;
}
dd .tit{
    height: 76rpx;
    font-size: 28rpx;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #000;
}
.price{
    color: red;
    font-size: 32rpx;
    padding-left: 10rpx;
}
</style>